事件處理（Handling Events）是讓網頁從靜態變成動態的一大關鍵，如果沒有事件處理，網頁只能單純顯示文字與圖片，而無法回應使用者的操作

事件（Events）是什麼

使用者與網頁互動時觸發的動作

例如：

• 滑鼠：click 點擊、mouseover 滑過、dblclick 雙擊
• 鍵盤：keydown 按下按鍵、keyup 放開按鍵
• 表單：change 輸入內容改變、submit 送出表單
• 瀏覽器：load 載入頁面、scroll 捲動頁面

為什麼需要處理事件

讓網頁能夠對使用者的動作做出反應並執行功能，而不是只顯示靜態頁面

• 提升互動性
• 驗證使用者的資料輸入
• 動態更新

在 Day 6 的文章有提到在React中，JSX屬性與事件需要遵守 camelCase 的命名規則，因此在事件處理時，會寫成onClick, onChange等等

使用 JSX 傳入函式

React 的事件處理通常會將一個函式本身作為值傳給事件屬性，而不是字串

傳統 HTML 寫法：

<button onclick="handleClick()">Click me</button>

React 寫法：

  const handleClick = () => {
    console.log("Clicked");
   
  return <button onClick= {handleClick}> Click me </button>;

範例：

Home.js

const Home = () => {

  const handleClick = () => {
    console.log("Clicked");
  }

  return (
    <div className="home">
      <h2>Homepage</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
 
export default Home;

App.js

import Home from './Home';

function App() {
  return (
    <div className="App">
      <div className="content">
        <Home />
      </div>
    </div>
  );
}

export default App;

瀏覽器執行畫面

如果需要傳遞參數，可以使用 Arrow Function（箭頭函式）

例如：

  const handleClick = (name) => {
    console.log("Hello" + name);
  };
  return <button onClick={() => handleClick("Liu")}>Click me</button>;
}

範例：

Home.js

const Home = () => {

  const handleClick = (name) => {
    console.log("Hello " + name);
  }

  return (
    <div className="home">
      <h2>Homepage</h2>
      <button onClick={() => handleClick("Liu")}>Click me</button>
    </div>
  );
}
 
export default Home;

瀏覽器執行畫面

Events Object（事件物件）

當事件被觸發時，事件處理函式會接收到一個參數（通常是 e 或 event），在React中，此參數是合成事件 (SyntheticEvent)，為不同的瀏覽器提供一致的事件介面

常用的屬性與方法

• event.target：觸發事件的 DOM 元素
• event.preventDefault()：阻止瀏覽器的預設行為

範例：

Home.js

const Home = () => {

  const handleClick = (e) => {
    console.log("Clicked", e.target);
  }

  const handleClickAgain = (name, e) => {
    console.log("Hello " + name, e);
  }

  return (
    <div className="home">
      <h2>Homepage</h2>
      <button onClick={handleClick}>Click me</button>
      <button onClick={(e) => handleClickAgain("Liu", e)}>Click me again</button>
    </div>
  );
}
 
export default Home;

瀏覽器執行畫面